(function() {

// Localize jQuery variable
var jQuery;

/******** Load jQuery if not present *********/
if (window.jQuery === undefined || window.jQuery.fn.jquery !== '1.4.2') {
    var script_tag = document.createElement('script');
    script_tag.setAttribute("type","text/javascript");
    script_tag.setAttribute("src",
        "http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js");
    if (script_tag.readyState) {
      script_tag.onreadystatechange = function () { // For old versions of IE
          if (this.readyState == 'complete' || this.readyState == 'loaded') {
              scriptLoadHandler();
          }
      };
    } else {
      script_tag.onload = scriptLoadHandler;
    }
    // Try to find the head, otherwise default to the documentElement
    (document.getElementsByTagName("head")[0] || document.documentElement).appendChild(script_tag);
} else {
    // The jQuery version on the window is the one we want to use
    jQuery = window.jQuery;
    main();
}

/******** Called once jQuery has loaded ******/
function scriptLoadHandler() {
    // Restore $ and window.jQuery to their previous values and store the
    // new jQuery in our local jQuery variable
    jQuery = window.jQuery.noConflict(true);
    // Call our main function
    main(); 
}

/******** Our main function ********/
function main() { 
    jQuery(document).ready(function($) { 
        /******* Load CSS *******/
        var bootstrap_link = $("<link>", { 
            href: "http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css",
            rel: "stylesheet", 
            type: "text/css" 
        });
        bootstrap_link.appendTo('head');       

        /******* Load HTML *******/
        var jsonp_url = "http://al.smeuh.org/cgi-bin/webwidget_tutorial.py?callback=?";
        $.getJSON(jsonp_url, function(data) {
          $('#example-widget-container').html("\
           <style scoped>#wlogin-box {border: 1px solid #ccc;width:400px}#wlogin-header {width: 100%;height: 30px;background-color: #0064a6;line-height: 30px;padding: 0 1px;}#wlogin-title {color: white; margin-left: 10px;font-size: 1.2em;}#wlogin-form {padding: 10px;}</style>" +          
          	"<div id='wlogin-box'> \
	          	<div id='wlogin-header'><span id='wlogin-title'>Login Widget</span></div> \
	          	<div id='wlogin-content'> \
	          	<form role='form' id='wlogin-form'> \
				  <div class='form-group'> \
				    <label for='exampleInputEmail1'>Email address</label> \
				    <input type='email' class='form-control' id='exampleInputEmail1' placeholder='Enter email'> \
				  </div> \
				  <div class='form-group'> \
				    <label for='exampleInputPassword1'>Password</label> \
				    <input type='password' class='form-control' id='exampleInputPassword1' placeholder='Password'> \
				  </div> \
				  <div class='checkbox'> \
				    <label> \
				      <input type='checkbox'>" + data.html + "  \
				    </label>  \
				  </div>  \
				  <button type='submit' class='btn btn-default'>Submit</button>  \
				</form>  \
	          	</div> \
          	</div>");
        });
    });
}

})();